﻿<%@ Page language="c#" Inherits="LocalBoard.Web.HomePage" CodeFile="Home.aspx.cs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Virtual Bulletin Board</title>
		<link rel="stylesheet" type="text/css" href="yui/base/base.css" /> 
		<link rel="stylesheet" type="text/css" href="yui/fonts/fonts-min.css" />
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAWODszYhDtC7_xwLICoryGBS5g8BlH1DIA1UJB8trBuEYz6-ecRRbU96F4GVXIyYoP0qYC8NYnulXkw"
      type="text/javascript"></script>
		<script type="text/javascript">
			var map = null;
			var geocoder = null;
			var newMarker = null;
			var custIcon = new GIcon();
			custIcon.image = "images/mm_20_red.png";
			custIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
			custIcon.iconSize = new GSize(12,20);
			custIcon.shadowSize = new GSize(22,20);
			custIcon.iconAnchor = new GPoint(6,20);
			custIcon.infoWindowAnchor = new GPoint(5,1);

			function initialize() {
				if (GBrowserIsCompatible())
					map = new GMap2(document.getElementById("map"));
				map.addControl(new GLargeMapControl());
        geocoder = new GClientGeocoder();
        geocoder.getLatLng("194 Mercer st, New York, NY", function(point) {
						if(!point)
							map.setCenter(new GLatLng(37.4419, -122.1419), 13);
						else
							map.setCenter(point, 13);
						loadBoards();
					});
			}
			
			function loadBoards() {
				GDownloadUrl("GetBoardList.aspx", function(data, responseCode) {
					if(responseCode != 200)
						alert("Response code: " + responseCode + "<br>Content: " + data);
					else {
						var o = eval('(' + data + ')');
						for (var i=0; i<o.items.length; i++) {
							addBoardOverlay(o.items[i]);
						}
					}
				});
			}
			function addBoardOverlay(item, pan) {
//				alert("la:" + item.la + 
//						 " lo:" + item.lo +
//						 " u:" + item.u +
//						 " n:" + item.n +
//						 " pn:" + item.pn +
//						 " a:" + item.a);
				if(pan)
					map.panTo(new GLatLng(item.la, item.lo), 13);
        var m = new GMarker(new GLatLng(item.la, item.lo), custIcon);
        
        GEvent.addListener(m, "mouseover", function() {
					var info = "<a href=\"" + item.u + "\">" + item.n + "</a><br> at " + item.pn + "<br>" + item.a;
          m.openInfoWindowHtml(info);
        });
        map.addOverlay(m);
			}
			
			function showAddress(address) {
				if (geocoder) {
		      geocoder.getLocations(address, 
						function(response) {
							if (!response || response.Status.code != 200) {
								alert("Sorry, we were unable to geocode that address");
							} else {
								if(newMarker) {
									newMarker.closeInfoWindow();
									newMarker.hide();
								}
								var place = response.Placemark[0];
								var point = new GLatLng(place.Point.coordinates[1],
																		place.Point.coordinates[0]);
								map.panTo(point, 13);
								newMarker = new GMarker(point);
					      var latlng = newMarker.getLatLng();
								var lat = latlng.lat();
								var lng = latlng.lng();

								GEvent.addListener(newMarker, "click", function() {
									var html = "<h1>Create a board on this location!</h1><table>" +
														 "<tr><td><b>Board Name</b>*:</td> <td><input type='text' id='boardName'/></td> </tr>" +
														 "<tr><td><b>Place Name</b>:</td> <td><input type='text' id='placeName'></td> </tr>" +
														 "<tr><td><b>Address</b>:</td> <td><div id='boardAddress2'>" + place.address + "</div></td> </tr>" +
														 "<tr><td><b>Latitude,Longitude</b>:</td> <td><div id='latLng'>" + lat + "," + lng + "</div></td> </tr>" +
														 "<tr><td colspan='2' algin='right'><input type='button' value='Create' onclick='createBoard(" + lat + ", " + lng + ")'/></td></tr>" +
														 "</table>";

									newMarker.openInfoWindowHtml(html);
								});
								map.addOverlay(newMarker);
							}
						}
					);
				}
			}

    function createBoard(lat, lng) {
      var name = document.getElementById("boardName").value;
      var placeName = document.getElementById("placeName").value;
      var address = document.getElementById("boardAddress2").innerText;

      var url = "CreateBoard.aspx?name=" + escape(name) + "&address=" + escape(address) + "&place=" + escape(placeName) +
                "&lat=" + lat + "&lng=" + lng;
      GDownloadUrl(url, function(data, responseCode) {
          newMarker.closeInfoWindow();
					newMarker.hide();
          if(responseCode != 200)
						alert("Response code: " + responseCode + "<br>Content: " + data);
					else {
					  var item = {"n":name,"pn":placeName,"a":address,"u":"SeeBoard.aspx?board=" + data,"lo":lng,"la":lat};
					  addBoardOverlay(item, true);
					}
      });
    }
    // addAddressToMap() is called when the geocoder returns an
    // answer.  It adds a marker to the map with an open info window
    // showing the nicely formatted version of the address and the country code.
    function addAddressToMap(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("Sorry, we were unable to geocode that address");
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        newMarker = new GMarker(point);
        map.addOverlay(newMarker);
        newMarker.openInfoWindowHtml(place.address + '<br>' +
          '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
      }
    }

    // showLocation() is called when you click on the Search button
    // in the form.  It geocodes the address entered into the form
    // and adds a marker to the map at that location.
    function showLocation() {
      var address = document.forms[0].q.value;
      geocoder.getLocations(address, addAddressToMap);
    }

   // findLocation() is used to enter the sample addresses into the form.
    function findLocation(address) {
      document.forms[0].q.value = address;
      showLocation();
    }
    </script>
		<style type="text/css">
			#map {
				width: 650px;
				height: 400px;
        border: 1px solid black;
        				
			}
		</style>
  </head>

  <body onload="initialize()" onunload="GUnload()">
    <form id="form1" action="#" onsubmit="showAddress(this.address.value); return false">
      <h1>Welcome to Virtual Bulletin Board!</h1><p>
        <input type="text" size="60" name="address" value="135 W. 50th st, New York City, NY" />
        <input type="submit" value="Go!" />
      </p>
      <div id="map"></div>
      <div id="message"></div>
    </form>

  </body>
</html>
